<script setup lang="ts">
import { ref, watch } from "vue";
import vClickOutside from "@/utils/clickOutside";

// 我的文件菜单是否折叠
const myFileCollapseRef = ref(false);
// 快捷访问是否折叠
const shortcutCollapseRef = ref(false);
// 我的文件右侧三个点选择框是否折叠
const tooltipCollapseRef = ref(true);
// 点击我的文件右侧三个点选择框外部事件（关闭选择框）
const clickTooltipOutside = () => {
  tooltipCollapseRef.value = true;
};

// 菜单名称列表
const menuNameList = [
  "myFile", // 我的文件
  "document", // 文档
  "video", // 视频
  "seed", // 种子
  "other", // 其它
  "audio", // 音频
  "image", // 图片
  "recyclebin" // 回收站
];
// 菜单选中状态
const activeItemRef = ref(menuNameList[0]);
// 菜单选中状态监听事件
watch(
  () => activeItemRef.value,
  () => {
    console.log(activeItemRef.value);
  }
);

defineOptions({
  name: "DiskSidebar"
});
</script>

<template>
  <div
    class="h-full w-[200px] relative"
    style="border-right: 1px solid #f1f2f4; padding-top: 1.25rem"
  >
    <div class="wp-s-aside-nav__sub-top">
      <!-- 我的文件 -->
      <div class="wp-s-aside-nav__file-list">
        <a
          :class="[
            'wp-s-aside-nav__sub-container',
            'cursor-p wp-s-aside-nav__file-list-all',
            activeItemRef == menuNameList[0] ? 'is-exact-active is-active' : ''
          ]"
          ><i
            :class="[
              'iconfont',
              'icon-arrow-down',
              'wp-s-aside-nav__sub-container-icon',
              'inline-block-v-middle',
              myFileCollapseRef ? 'is-collapse' : ''
            ]"
            @click="myFileCollapseRef = !myFileCollapseRef"
          />
          <span
            class="wp-s-aside-nav__sub-container-text inline-block-v-middle ml-[10px]"
            @click="activeItemRef = menuNameList[0]"
            >我的文件</span
          >
          <span class="wp-s-aside-nav__sub-container-edit"
            ><span
              class="u-popover__reference-wrapper"
              @click="tooltipCollapseRef = false"
              ><i
                class="iconfont icon-cate-edit inline-block-v-middle u-popover__reference" /></span
          ></span>
        </a>
        <div
          v-if="!myFileCollapseRef"
          class="wp-s-aside-nav__file-list-body wp-s-aside-nav__sub-wrapper"
        >
          <div>
            <span
              ><a
                :class="[
                  'wp-s-aside-nav__sub-item',
                  'wp-s-aside-nav__file-list-cate',
                  activeItemRef == menuNameList[1]
                    ? 'is-exact-active is-active'
                    : ''
                ]"
                title=""
                draggable="false"
                ><div class="wp-s-aside-nav__sub-item-body">
                  <i
                    class="iconfont wp-s-aside-nav__sub-item-icon inline-block-v-middle icon-cate-doc"
                  />
                  <p
                    title="文档"
                    class="wp-s-aside-nav__sub-item-text inline-block-v-middle text-elip"
                    @click="activeItemRef = menuNameList[1]"
                  >
                    文档
                  </p>
                </div></a
              ><a
                :class="[
                  'wp-s-aside-nav__sub-item',
                  'wp-s-aside-nav__file-list-cate',
                  activeItemRef == menuNameList[2]
                    ? 'is-exact-active is-active'
                    : ''
                ]"
                title=""
                draggable="false"
                ><div class="wp-s-aside-nav__sub-item-body">
                  <i
                    class="iconfont wp-s-aside-nav__sub-item-icon inline-block-v-middle icon-cate-video"
                  />
                  <p
                    title="视频"
                    class="wp-s-aside-nav__sub-item-text inline-block-v-middle text-elip"
                    @click="activeItemRef = menuNameList[2]"
                  >
                    视频
                  </p>
                </div></a
              ><a
                :class="[
                  'wp-s-aside-nav__sub-item',
                  'wp-s-aside-nav__file-list-cate',
                  activeItemRef == menuNameList[3]
                    ? 'is-exact-active is-active'
                    : ''
                ]"
                title=""
                ><div class="wp-s-aside-nav__sub-item-body">
                  <i
                    class="iconfont wp-s-aside-nav__sub-item-icon inline-block-v-middle icon-cate-bt"
                  />
                  <p
                    title="种子"
                    class="wp-s-aside-nav__sub-item-text inline-block-v-middle text-elip"
                    @click="activeItemRef = menuNameList[3]"
                  >
                    种子
                  </p>
                </div></a
              ><a
                :class="[
                  'wp-s-aside-nav__sub-item',
                  'wp-s-aside-nav__file-list-cate',
                  activeItemRef == menuNameList[4]
                    ? 'is-exact-active is-active'
                    : ''
                ]"
                title=""
                draggable="true"
                style="transform: translateZ(0px)"
                ><div class="wp-s-aside-nav__sub-item-body">
                  <i
                    class="iconfont wp-s-aside-nav__sub-item-icon inline-block-v-middle icon-cate-other"
                  />
                  <p
                    title="其它"
                    class="wp-s-aside-nav__sub-item-text inline-block-v-middle text-elip"
                    @click="activeItemRef = menuNameList[4]"
                  >
                    其它
                  </p>
                </div></a
              ><a
                :class="[
                  'wp-s-aside-nav__sub-item',
                  'wp-s-aside-nav__file-list-cate',
                  activeItemRef == menuNameList[5]
                    ? 'is-exact-active is-active'
                    : ''
                ]"
                title=""
                ><div class="wp-s-aside-nav__sub-item-body">
                  <i
                    class="iconfont wp-s-aside-nav__sub-item-icon inline-block-v-middle icon-cate-music"
                  />
                  <p
                    title="音频"
                    class="wp-s-aside-nav__sub-item-text inline-block-v-middle text-elip"
                    @click="activeItemRef = menuNameList[5]"
                  >
                    音频
                  </p>
                </div></a
              ><a
                :class="[
                  'wp-s-aside-nav__sub-item',
                  'wp-s-aside-nav__file-list-cate',
                  activeItemRef == menuNameList[6]
                    ? 'is-exact-active is-active'
                    : ''
                ]"
                title=""
                ><div class="wp-s-aside-nav__sub-item-body">
                  <i
                    class="iconfont wp-s-aside-nav__sub-item-icon inline-block-v-middle icon-cate-pic"
                  />
                  <p
                    title="图片"
                    class="wp-s-aside-nav__sub-item-text inline-block-v-middle text-elip"
                    @click="activeItemRef = menuNameList[6]"
                  >
                    图片
                  </p>
                </div></a
              ></span
            >
          </div>
        </div>
      </div>
      <!-- 分割线 -->
      <div class="wp-s-aside-nav__divider" />
      <!-- 回收站 -->
      <a
        :class="[
          'wp-s-aside-nav__sub-item',
          activeItemRef == menuNameList[7] ? 'is-exact-active is-active' : ''
        ]"
        title=""
        ><div class="wp-s-aside-nav__sub-item-body">
          <p
            title="回收站"
            class="wp-s-aside-nav__sub-item-text inline-block-v-middle text-elip"
            @click="activeItemRef = menuNameList[7]"
          >
            回收站
          </p>
        </div></a
      >
      <!-- 分割线 -->
      <div class="wp-s-aside-nav__divider" />
      <!-- 快捷访问 -->
      <div class="wp-s-aside-nav__list-shortcut-contain">
        <div class="wp-s-aside-nav__list-shortcut is-new">
          <div
            exact-active-class="is-exact-active"
            active-class="is-active"
            to="[object Object]"
            class="wp-s-aside-nav__sub-container cursor-p wp-s-aside-nav__list-shortcut-all"
          >
            <i
              :class="[
                'iconfont',
                'icon-arrow-down',
                'wp-s-aside-nav__sub-container-icon',
                'inline-block-v-middle',
                shortcutCollapseRef ? 'is-collapse' : ''
              ]"
              @click="shortcutCollapseRef = !shortcutCollapseRef"
            />
            <span
              class="wp-s-aside-nav__sub-container-text inline-block-v-middle"
              >快捷访问</span
            >
          </div>
          <div class="wp-s-aside-nav__list-shortcut-empty">
            <img
              src=""
              class="wp-s-aside-nav__list-shortcut-empty-img"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 存储空间占用情况 -->
    <div class="wp-s-aside-nav__sub-bottom">
      <div class="wp-s-aside-nav__quota">
        <span>
          <span>
            <div
              class="wp-s-aside-nav__quota-wrapper u-popover__reference"
              tabindex="0"
            >
              <div class="wp-s-aside-nav__quota-progress">
                <div
                  class="wp-s-aside-nav__quota-progress-rate"
                  style="width: 3.85%"
                />
              </div>
              <div class="wp-s-aside-nav__quota-body">
                <span class="wp-s-aside-nav__quota-body-text"
                  >315.4G/8197G</span
                >
              </div>
            </div>
          </span>
        </span>
      </div>
    </div>
  </div>
  <!-- 我的文件右侧三个点选择框 -->
  <div
    v-if="!tooltipCollapseRef"
    v-click-outside="clickTooltipOutside"
    role="tooltip"
    class="u-popover u-popper wp-s-tooltip-no-padding wp-s-tooltip-margin-left"
    tabindex="0"
    style="
      width: 120px;
      position: absolute;
      top: 44px;
      left: 190px;
      transform-origin: left center;
      z-index: 2003;
    "
  >
    <div class="wp-s-aside-nav__cate-pop">
      <div role="group" aria-label="checkbox-group" class="u-checkbox-group">
        <div class="wp-s-aside-nav__cate-pop-item">
          <label class="u-checkbox is-checked"
            ><span class="u-checkbox__input is-checked"
              ><span class="u-checkbox__inner" />
              <input
                type="checkbox"
                aria-hidden="false"
                class="u-checkbox__original"
                value="1" /></span
            ><span class="u-checkbox__label">图片 </span></label
          >
        </div>
        <div class="wp-s-aside-nav__cate-pop-item">
          <label class="u-checkbox is-checked"
            ><span class="u-checkbox__input is-checked"
              ><span class="u-checkbox__inner" />
              <input
                type="checkbox"
                aria-hidden="false"
                class="u-checkbox__original"
                value="2" /></span
            ><span class="u-checkbox__label">文档 </span></label
          >
        </div>
        <div class="wp-s-aside-nav__cate-pop-item">
          <label class="u-checkbox is-checked"
            ><span class="u-checkbox__input is-checked"
              ><span class="u-checkbox__inner" />
              <input
                type="checkbox"
                aria-hidden="false"
                class="u-checkbox__original"
                value="3" /></span
            ><span class="u-checkbox__label">视频 </span></label
          >
        </div>
        <div class="wp-s-aside-nav__cate-pop-item">
          <label class="u-checkbox is-checked"
            ><span class="u-checkbox__input is-checked"
              ><span class="u-checkbox__inner" />
              <input
                type="checkbox"
                aria-hidden="false"
                class="u-checkbox__original"
                value="4" /></span
            ><span class="u-checkbox__label">种子 </span></label
          >
        </div>
        <div class="wp-s-aside-nav__cate-pop-item">
          <label class="u-checkbox is-checked"
            ><span class="u-checkbox__input is-checked"
              ><span class="u-checkbox__inner" />
              <input
                type="checkbox"
                aria-hidden="false"
                class="u-checkbox__original"
                value="5" /></span
            ><span class="u-checkbox__label">音频 </span></label
          >
        </div>
        <div class="wp-s-aside-nav__cate-pop-item">
          <label class="u-checkbox is-checked"
            ><span class="u-checkbox__input is-checked"
              ><span class="u-checkbox__inner" />
              <input
                type="checkbox"
                aria-hidden="false"
                class="u-checkbox__original"
                value="6" /></span
            ><span class="u-checkbox__label">其它 </span></label
          >
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("../../assets/css/baidu-icon.css");
@import url("../../assets/css/baidu.css");
</style>
